<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            :background-color="slidercolor"
            text-color="#ffffff"
            active-text-color="#ffffff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon" style="color: #ffffff !important"></i>
                            <span slot="title">{{ item.title }}</span>
                            <el-badge class="mark" :value="num1" v-if="item.index == 'fwjg' && num1 != 0" style="margin-left: 6px" />
                            <el-badge class="mark" :value="num2" v-if="item.index == 'gdgl' && num2 != 0" style="margin-left: 6px" />
                            <el-badge class="mark" :value="num4" v-if="item.index == 'wtyylist' && num4 != 0" style="margin-left: 6px" />
                            <!-- <el-badge class="mark" :value="num5" v-if="item.index == 'htgl' && num5 != 0"
                                style="margin-left: 6px;" /> -->
                        </template>
                        <template v-for="(subItem, index) in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">
                                    {{ subItem.title }}
                                    <el-badge
                                        class="mark"
                                        :value="num4"
                                        v-if="subItem.index == 'wtswbj' && num4 != 0"
                                        style="margin-left: 6px"
                                    />
                                </template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index"
                                    >{{ threeItem.title
                                    }}<el-badge
                                        class="mark"
                                        :value="num4"
                                        v-if="threeItem.index == 'wtfwjglist' && num4 != 0"
                                        style="margin-left: 6px"
                                    />
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="index">
                                {{ subItem.title }}
                                <el-badge
                                    class="mark"
                                    :value="num1"
                                    v-if="subItem.index == 'fwjglist' && num1 != 0"
                                    style="margin-left: 6px"
                                />
                                <el-badge
                                    class="mark"
                                    :value="num2"
                                    v-if="subItem.index == 'gdlist' && num2 != 0"
                                    style="margin-left: 6px"
                                />
                                <!-- <el-badge class="mark" :value="num5" v-if="subItem.index == 'qthtcwqrlist' && num5 != 0" style="margin-left: 6px;" /> -->
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon" style="color: #ffffff !important"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
import items from '@/components/common/silderList.vue';

import { dbnum, szqrdbnum } from '@/api/index';
export default {
    data() {
        return {
            slidercolor: '#008A94',
            // slidercolor: '#3E65EA',
            collapse: false,
            num1: 0,
            num2: 0,
            num4: 0,
            num5: 0,
            numform: {
                num1: 0,
                num2: 0,
                num4: 0
            },
            numform1: {},
            // items:[],
            // items:this.$store.getters.role == '10006' || this.$store.getters.role == '10007' || this.$store.getters.role == '10009'
            //         ? items.cwlb
            //         : this.$store.getters.role == '10010'
            //         ? items.nqlb
            //         : this.$store.getters.role == '20001'
            //         ? items.stdw
            //         : this.$store.getters.role == '20002'
            //         ? items.stdwsh
            //         : this.$store.getters.role == '10015'
            //         ? items.jzzcglbsh
            //         : items.jzzcglb
            items:items.fgyMenu
        };
    },

    methods: {
        // 按角色分配菜单
        getitems(role) {
            switch (role) {
                // 管理员
                case '11111':
                    this.items = items.glyMenu;
                    break;
                // 管理员(经理部)
                case '22222':
                    this.items = items.jzbglyMenu;
                    break;
                // 中心领导
                case '10001':
                    this.items = items.zxldMenu;
                    break;
                // 经租部部长
                case '10002':
                    this.items = items.jzbbzMenu;
                    break;
                // 经租部副部长
                case '10003':
                    this.items = items.jzbfbzMenu;
                    break;
                // 修缮部部长
                case '10004':
                    this.items = items.xsbbzMenu;
                    break;
                // 修缮部副部长
                case '10005':
                    this.items = items.xsbfbzMenu;
                    break;
                // 财务部部长
                case '10006':
                    this.items = items.cwbbzMenu;
                    break;
                // 修财务部副部长
                case '10007':
                    this.items = items.cwbfbzMenu;
                    break;
                // 工程管理岗
                case '10008':
                    this.items = items.gcglgMenu;
                    break;
                // 财务岗
                case '10009':
                    this.items = items.cwgMenu;
                    break;
                // 内勤
                case '10010':
                    this.items = items.nqMenu;
                    break;
                // 房管员
                case '10011':
                    this.items = items.fgyMenu;
                    break;
                // 办公室
                case '10012':
                    this.items = items.bgsMenu;
                    break;
                // 办公室(另一个)
                case '10017':
                    this.items = items.bgsMenu;
                    break;
                // 中心分管领导zxfgldMenu
                case '10013':
                    this.items = items.zxldMenu;
                    break;
                // 党办
                case '10014':
                    this.items = items.dbMenu;
                    break;
                // 经租部审核
                case '10015':
                    this.items = items.jzbshMenu;
                    break;
                // 受托单位
                case '20001':
                    this.items = items.stdwMenu;
                    break;
                // 受托单位
                case '20002':
                    this.items = items.stdwshMenu;
                    break;
                // 运营部
                case '10016':
                    this.items = items.yyMenu;
                    break;
                // 房管员（经理部）
                case '30012':
                    this.items = items.jzbfgyMenu;
                    break;
                // 经理部管修组长
                case '30011':
                    this.items = items.jzbgxzzMenu;
                    break;
                 // 经营组长
                 case '30004':
                    this.items = items.jzbjyzzMenu;
                    break;
                // 经营内勤1
                case '30005':
                    this.items = items.jzbjynqMenu1;
                    break;
                // 经营内勤2
                case '30006':
                    this.items = items.jzbjynqMenu2;
                    break;
                // 经营内勤3
                case '30007':
                    this.items = items.jzbjynqMenu3;
                    break;
                // 经营内勤4
                case '30008':
                    this.items = items.jzbjynqMenu4;
                    break;
                // 管修内勤1
                case '30013':
                    this.items = items.jzbgxnqMenu;
                    break;
                // 管修内勤2
                case '30014':
                    this.items = items.jzbgxnqMenu;
                    break;
                // 修缮内勤
                case '30010':
                    this.items = items.jzbxsnqMenu;
                    break;
                // 经理部部长
                case '30001':
                    this.items = items.jzbjlbbzMenu;
                    break;
                // 经理部副部长
                case '30002':
                    this.items = items.jzbjlbfbzMenu;
                    break;
                // 修缮部副部长
                case '30003':
                    this.items = items.jzbxsbfbzMenu;
                    break;
                // 修缮部部长
                case '30009':
                    this.items = items.jzbxsbbzMenu;
                    break;
                    
                default:
                    break;
            }
        },
        dbnum(data) {
            dbnum(data).then((res) => {
                console.log('待办', res);
                this.num1 = res.data.swnum;
                this.num2 = res.data.gdnum;
                this.num4 = res.data.wtswnum;
            });
        },
        // 收支确认待办数量
        szqrdbnum(data) {
            szqrdbnum(data).then((res) => {
                this.num5 = res.data.szqrdbnum;
            });
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        },
        dbnum1() {
            return this.$store.getters.dbnum1;
        },
        dbnum2() {
            return this.$store.getters.dbnum2;
        },
        dbnum4() {
            return this.$store.getters.dbnum4;
        },
        dbnum5() {
            return this.$store.getters.dbnum5;
        }
    },
    watch: {
        dbnum1(newVal, oldVal) {
            this.num1 = newVal;
            console.log('测试监听数据', newVal, oldVal);
        },
        dbnum2(newVal, oldVal) {
            this.num2 = newVal;
            console.log('测试监听数据2', newVal, oldVal);
        },
        dbnum4(newVal, oldVal) {
            this.num4 = newVal;
            console.log('测试监听数据4', newVal, oldVal);
        },
        dbnum5(newVal, oldVal) {
            this.num5 = newVal;
            console.log('测试监听数据5', newVal, oldVal);
        }
    },
    created() {
        this.getitems(this.$store.getters.role)
        let userid = this.$store.getters.userId;
        this.dbnum(userid);
        this.szqrdbnum(userid);
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', (msg) => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    }
};
</script>
<style>
.el-submenu__title i {
    color: #ffffff;
}

.el-menu-item.is-active {
    background-color: #016f77 !important;
    color: #fff;
}
</style>
<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;

}

.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 220px;
}

.sidebar > ul {
    height: 100%;
}
</style>
